<!--
 * @Author: pengzhuoying
 * @Date: 2022-03-16:09:26
 * @LastEditors: pengzhuoying
 * @LastEditTime: 2022-03-22 14:26:22
 * @Description: pengzhuoying created
 * @FilePath: \品新集成管理系统\pin-xin-admin\src\views\financial\voucher.vue
-->
<template>
  <div class="voucher relative">
    <span class="voucher-span" >总计：{{amountTotal}}元</span>
    <el-tabs v-model="editableTabsValue" type="card" @tab-click="handleClick">
      <el-tab-pane
        :key="index"
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name"
      >
        <el-form
          :model="searchValue"
          ref="queryForm"
          :inline="true"
          label-width="80px"
          size="mini"
        >
          <el-form-item label="费用类型">
            <el-select
              v-model="searchValue.bundle"
              placeholder="费用类型"
              @change="handleQuery"
            >
              <el-option
                v-for="item in feeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="工厂名称">
            <el-select v-model="searchValue.project" placeholder="请选择工厂"  @change="handleQuery" clearable>
          <el-option
            v-for="item in tenantIdOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @keyup.enter.native="handleQuery"
          ></el-option>
        </el-select>
         </el-form-item>
         <el-form-item label="项目名称">
        <el-input
          placeholder="请输入项目名称"
          clearable
          v-model="searchValue.tenantId"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
         <!-- <el-form-item label="项目名称">
            <el-select v-model="searchValue.tenantId" placeholder="请选择项目" @change="handleQuery" clearable>
          <el-option
            v-for="item in projectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @change="handleQuery"
          ></el-option>
        </el-select>
          </el-form-item> -->
          <el-form-item label="起止日期">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            v-for="item in tableHeader"
            :key="item.key"
            :label="item.label"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.key] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right; margin-top: 20px"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalSize"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import report from "@/api/report/voucher";
export default {
  name: "voucher",
  data() {
    return {
      tableData: null,
      pageNum: 1,
      pageSize: 10,
      totalSize: 10,
      searchValue: {
        bundle:'IN_STOCK'
      },
      loading: false,
      currentIndex: null,
      editableTabs: [
        {
          name: "1",
          title: "收入",
        },
        {
          name: "2",
          title: "成本",
        },
      ],
      editableTabsValue: "1",
      feeList: [
        {
          value: 'IN_STOCK',
          name: "加工收入 - 入库",
        },
        {
          value: 'RES_STOCK',
          name: "加工收入 - 退库",
        },
        {
          value: 'OTHER',
          name: "其他收入",
        },
      ],
      tableHeader: [],
      dateRange: [],
      tenantIdOptions: [
        { label: "龙华工厂", value: "龙华工厂" },
        { label: "盐田新工厂", value: "盐田新工厂" },
        { label: "盐田工厂", value: "盐田工厂" },
      ],
      projectOptions: window.projectOptions,
      amountTotal:''
    };
  },
  async created() {
    await this.dataTime()
    await this.getParamsList();
  },
  watch: {
    pageNum: {
      deep: true,
      handler: function () {
        this.getParamsList();
      },
    },
  },
  methods: {
    //搜索
    handleQuery() {
      this.pageNum = 1;
      this.getParamsList();
    },
    //重置
    resetQuery() {
      this.searchValue.bundle = this.editableTabsValue == '1'?"IN_STOCK":"MATERIAL_WASTAGE";
      this.dataTime();
      this.searchValue.project = "";
      this.searchValue.tenantId = "";
      this.handleQuery();
    },
    //日期默认前一个月
    dataTime() {
      Date.prototype.format = function (format) {
      var o = {
        "M+": this.getMonth() + 1, // month
        "d+": this.getDate(), // day
        "h+": this.getHours(), // hour
        "m+": this.getMinutes(), // minute
        "s+": this.getSeconds(), // second
        "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
        S: this.getMilliseconds(),
      };
      if (/(y+)/.test(format))
        format = format.replace(
          RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(format))
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return format;
    };
    this.dateRange = [];
    let begin = new Date();
    let end = new Date();
    new Date(begin.setMonth(new Date().getMonth() - 1));
    let begintime = begin.format("yyyy-MM-dd");
    let endtime = end.format("yyyy-MM-dd");
    this.dateRange.push(begintime)
    this.dateRange.push(endtime)
    },
    /* 获取凭证列表 */
    getParamsList() {
      return new Promise((resolve) => {
        this.loading = true;
        let params = {
          pn: this.pageNum,
          ps: this.pageSize,
          start: this.dateRange[0],
          end: this.dateRange[1],
        };
        report
          .queryVoucherList({...params,...this.searchValue})
          .then((res) => {
            if (res.code === 200) {
              this.tableData = res.data.result.rows;
              this.tableHeader = res.data.header;
              this.amountTotal = res.data.amountTotal;
              this.totalSize = res.data.result.total * 1;
            } else if (res.code === 500) {
              this.tableData = [];
              this.$message.info("凭证为空！");
            } else {
              this.$message.error(res.code + "-" + res.msg);
            }
            this.loading = false;
            resolve();
          })
          .catch((e) => {
            this.$message.error(e.toString());
          });
      });
    },
    //切换tab
    handleClick(tab, event) {
      if (tab.index == 0) {
        this.feeList = [
          {
          value: 'IN_STOCK',
          name: "加工收入 - 入库",
        },
        {
          value: 'RES_STOCK',
          name: "加工收入 - 退库",
        },
        {
          value: 'OTHER',
          name: "其他收入",
        },
        ];
         this.searchValue.bundle="IN_STOCK"
      } else {
        this.feeList = [
         {
          value: 'MATERIAL_WASTAGE',
          name: "物料损耗",
        },
        {
          value: 'OPERATING_EXPENSE',
          name: "经营费用",
        },
        {
          value: 'STAFF_WAGES',
          name: "人工工资",
        },
        {
          value: 'INPUT_EXPENSE',
          name: "固定费用",
        },
        ];
         this.searchValue.bundle="MATERIAL_WASTAGE"
      }
      this.handleQuery()
    },
  },
};
</script>

<style lang="less">
.voucher {
  width: 100%;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 16px;
  position: relative;
}
.voucher-span{
  position: absolute;
  right: 16px;
  top: 30px;
}
</style>